<template>
  <div class="mainoe">
    <div class="main_spac1" style="padding-bottom: 5px">
      <div class="main_white padding10">
        <div class="mainor_form">
          <el-form
            :inline="true"
            :model="mainoe"
            :rules="rules"
            class="demo-form-inline"
            ref="userListFrom"
            label-width="70px"
          >
            <el-form-item label="用户名称" prop="name">
              <el-input
                v-model.trim="mainoe.name"
                placeholder="用户名称"
                clearable
                class="wid220"
              ></el-input>
              <el-button @click="goodsFormVisible = true" class="marginLeft5"
                >选择退货订单</el-button
              >
            </el-form-item>
            <el-form-item label="退货原因" prop="select" label-width="80px">
              <el-select
                v-model.trim="mainoe.select"
                placeholder="退货原因"
                class="wid140"
              >
                <el-option label="货物变质、损坏" value="1"></el-option>
                <el-option label="多发、错发" value="2"></el-option>
                <el-option label="订单下错误" value="3"></el-option>
                <el-option label="其他原因" value="4"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label prop="name1" v-if="mainoe.select == 4">
              <el-input
                v-model.trim="mainoe.name1"
                placeholder="其他原因"
                clearable
                class="wid220 marginLeft5"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="mainoe_td boxdq marginLeft0 marginBottom10 marginTop10">
          <div class="mainoe_tdl">
            退货商品清单
            <el-tooltip class="item" effect="dark" placement="bottom">
              <div slot="content">
                本系统采用单退货方式进行退货处理，
                <br />可对订单做整单退货和部分商品退货
              </div>
              <svg-icon icon-class="summary_question" />
            </el-tooltip>
          </div>
          <div class="mainoe_tdr">关联订单号：DD20200610000003</div>
        </div>
        <div class="main_table marginTop0">
          <el-table
            ref="multipleTable"
            v-loading="listLoading"
            :data="list"
            element-loading-text="加载中"
            fit
            highlight-current-row
          >
            <el-table-column label="序号" prop="userId" width="100">
              <template slot-scope="scope">{{ scope.$index + 1 }}</template>
            </el-table-column>
            <el-table-column label="图片" width="100" class-name="main_hei">
              <template slot-scope="scope">
                <div class="demo-image__error mainor_im">
                  <el-image
                    fit="fill"
                    :src="scope.row.url"
                    :preview-src-list="srcList"
                    :z-index="scope.row.$index"
                  >
                    <div slot="error" class="image-slot">
                      <i class="el-icon-picture-outline"></i>
                    </div>
                  </el-image>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="商品名称"
              prop="userId"
              width="150"
              class-name="main_hei"
            />
            <el-table-column
              label="单位"
              prop="userNickname"
              class-name="main_hei"
            />
            <el-table-column
              label="发货数量"
              prop="userNickname"
              width="150"
              class-name="main_hei"
            />
            <el-table-column
              label="发货单价"
              prop="userNickname"
              width="150"
              class-name="main_hei"
            />
            <el-table-column
              label="已退款"
              prop="userNickname"
              class-name="main_hei"
            />
            <el-table-column
              label="申请退货数"
              prop="price"
              width="200"
              class-name="main_hei"
            >
              <template slot-scope="scope">
                <el-input
                  :ref="'price' + scope.$index"
                  v-model="scope.row.price"
                  placeholder="单价"
                  class="wid120"
                  @blur.prevent="
                    (val) => {
                      inputBlur(val, scope.$index, 'price');
                    }
                  "
                  @keyup.enter.native="$event.target.blur"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="申请退货数"
              prop="num"
              width="200"
              class-name="main_hei"
            >
              <template slot-scope="scope">
                <el-input
                  :ref="'sorting' + scope.$index"
                  v-model="scope.row.num"
                  placeholder="发货数量"
                  class="wid120"
                  @blur.prevent="
                    (val) => {
                      inputBlur(val, scope.$index, 'sorting');
                    }
                  "
                  @keyup.enter.native="$event.target.blur"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="申请退货金额"
              prop="userNickname"
              width="120"
              class-name="main_hei"
            />
            <el-table-column
              label="备注"
              prop="userNickname"
              width="200"
              class-name="main_hei"
            >
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.userNickname"
                  placeholder="备注"
                  class="wid140"
                ></el-input>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="mainoe_up marginTop20" style="min-height: 500px">
          <div class="main_tile boxdq marginBottom10">
            <div class="main_tile_l marginLeft0">
              <em></em>图片信息
              <span>仅支持jpg，jpeg，png格式，文件小于2M，最多添加5张</span>
            </div>
          </div>
          <div class="main_upImg marginLeft10">
            <el-upload
              action="#"
              list-type="picture-card"
              :on-success="handSuccess"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :auto-upload="false"
              multiple
              :limit="5"
              :headers="{
                Authorization:getToken()
              }"
              :file-list="form.storeShowImgArr"
            >
              <span slot="default">
                <svg
                  aria-hidden="true"
                  class="main_page_svg"
                  width="32"
                  height="27"
                >
                  <use xlink:href="#icon-commodit_camera" />
                </svg>
              </span>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img :src="dialogImageUrl" alt />
            </el-dialog>
            <div class="clearfix"></div>
          </div>
        </div>
        <div class="clearfix"></div>
        <div class="mainoe_pr boxdq">
          <div class="mainor_prl">
            <el-button type="primary" @click="preservation(1)" v-repeatClick
              >保存并返回列表</el-button
            >
            <el-button
              class="reset marginLeft10"
              type="info"
              @click="preservation(2)"
              v-repeatClick
              >保存继续新增</el-button
            >
            <el-button @click="$router.back(-1)">取消</el-button>
          </div>
          <div class="mainoe_prr">
            合计品种：{{ list.length }}件
            <span>合计金额：¥222200</span>
          </div>
        </div>
      </div>
    </div>

    <el-dialog
      title="选择退货订单"
      :visible.sync="goodsFormVisible"
      class="main_dialog dialog700"
    >
      <el-form
        :inline="true"
        :model="form"
        class="demo-form-inline"
        ref="userListFrom1"
        label-width="90px"
      >
        <el-form-item label>
          <el-date-picker
            v-model="form.createTime"
            type="date"
            class="wid140"
            :editable="false"
            placeholder="选择配送日期"
            value-format="yyyy-MM-dd"
            :clearable="false"
          />
          <el-select v-model.trim="form.select" class="wid120 marginLeft5">
            <el-option label="单号" value="1"></el-option>
            <el-option label="商品" value="2"></el-option>
          </el-select>
          <el-input
            placeholder="订单号"
            v-model="form.name"
            class="input-with-select main_search marginLeft5 wid220"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="main_search"
            ></el-button>
          </el-input>
        </el-form-item>
      </el-form>
      <div class="main_table marginTop0" style="min-height: 500px">
        <el-table
          ref="multipleTable1"
          v-loading="listLoading"
          :data="goods"
          element-loading-text="加载中"
          fit
          highlight-current-row
        >
          <el-table-column
            label="订单号"
            prop="userId"
            width="220"
            class-name="main_hei"
          >
            <template slot-scope="scope">
              <div class="mainoe_id">
                <p>{{ scope.row.userId }}</p>
                <span>{{ scope.row.time }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="配送时间"
            prop="userNickname"
            width="180"
            class-name="main_hei"
          />
          <el-table-column
            label="金额"
            prop="userNickname"
            width="100"
            class-name="main_hei"
          />
          <el-table-column label="操作" align="center" class-name="main_hei">
            <template>
              <el-link type="success">整单退</el-link>
              <el-link type="success">部分退</el-link>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  category_list,
  category_use,
} from "@/api/commodity/commodityClassification";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import rules from "@/rules/orderExchange";

export default {
  components: {},
  data() {
    return {
      // 验证
      rules,
      // 信息
      mainoe: {
        name: "",
        name1: "",
        select: "",
      },
      // 搜索
      form: {
        createTime: "",
        name: "",
        select: "1",
      },
      // 列表数据
      list: [
        {
          userId: 1,
          url:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          userNickname: "窘况冻解冻解冻解冻解冻解冻解冻解冻解冻",
          num: "2.2",
          price: "2.2",
          userLevel: "解冻解冻解冻解冻解冻解冻解冻解冻解冻解冻解冻",
        },
        {
          userId: 2,
          url:
            "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=966242839,2938392410&fm=26&gp=0.jpg",
          userNickname: "窘况冻解冻解冻解冻解冻解冻解冻解冻解冻",
          num: "2.2",
          price: "2.2",
          userLevel: "解冻解冻解冻解冻解冻解冻解冻解冻解冻解冻解冻",
        },
        {
          userId: 3,
          userNickname: "窘况",
          num: "1",
          price: "2.2",
          url: "",
          userLevel: "解冻解冻解冻解冻解冻解冻解冻解冻解冻解冻解冻",
        },
        {
          userId: 4,
          url: "",
          userNickname: "窘况",
          num: "2",
          price: "2.2",
          userLevel: "解冻解冻解冻解冻解冻解冻解冻解冻解冻解冻解冻",
        },
      ],
      goods: [
        {
          userId: "DD2020042900000011",
          time: "2020-04-29 11:24:21",
          num: "2.2",
          userNickname: "窘况",
          userLevel: "解冻解冻解冻解冻解冻解冻解冻解冻解冻解冻解冻",
        },
        {
          userId: "DD2020042900000011",
          time: "2020-04-29 11:24:21",
          num: "2.2",
          userNickname: "窘况",
          userLevel: "解冻解冻解冻解冻解冻解冻解冻解冻解冻解冻解冻",
        },
      ],
      listLoading: false,
      // 图片预览
      srcList: [
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=966242839,2938392410&fm=26&gp=0.jpg",
      ],
      // 上传图片
      dialogImageUrl: "",
      dialogVisible: false,
      // 选择退货订单
      goodsFormVisible: false,
    };
  },
  created() {},
  methods: {
    // 选择退货订单-搜索
    main_search() {
      console.log(this.input);
    },
    // 上传图片-删除
    handleRemove(file) {
      console.log(file);
    },
    // 上传图片-查看
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 上传图片-成功
    handSuccess(res, file, fileList) {
      console.log(res, file, fileList);
      this.form.storeShowImgArr.push({
        name: "",
        url: res.url,
      });
    },
    // 保存
    preservation(type) {
      this.$refs["userListFrom"].validate((valid) => {
        if (valid) {
        }
      });
    },
    // 焦点离开分拣数量
    inputBlur(val, index, name) {
      if (
        /^(\d+\.?)?\d{0,2}$/.test(parseFloat(val.target.value)) &&
        val.target.value != ""
      ) {
        this.offset(index, name);
      } else {
        this.$nextTick(() => {
          if (val.target.offsetParent) {
            val.target.offsetParent.querySelector("input").focus();
          }
        });
      }
    },
    offset(index, name) {
      if (index < this.list.length - 1) {
        this.$refs[name + (index += 1)].$el.offsetParent
          .querySelector("input")
          .focus();
      }
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";

.mainor_form form {
  width: 100%;
}
.mainoe {
  .mainoe_pr {
    margin-left: 10px;
    margin-top: 20px;
    margin-bottom: 10px;
    /deep/.el-button--default {
      border-color: $subActive;
      color: $menuText;
      &:hover {
        border-color: $menuActiveText;
        color: $menuActiveText;
      }
    }
    .mainoe_prr {
      font-size: $font_16;
      color: $colour_18;
      span {
        color: #fe3b3b;
        margin-left: 10px;
      }
    }
  }
  .mainoe_td {
    .mainoe_tdl {
      font-size: $font_14;
      color: $colour_18;
      .svg-icon {
        font-size: $font_14;
        vertical-align: -0.15em;
        fill: #c1c1c1;
        overflow: hidden;
      }
    }
    .mainoe_tdr {
      font-size: $font_14;
      color: $menuActiveText;
    }
  }
  .mainoe_id {
    p {
      margin-bottom: 2px;
    }
    span {
      color: #c1c1c1;
    }
  }
}
</style>
